<template>
  <div class="story-container">
    <el-main class="person-wrapper">
      <div class="flip-container" v-for="(item, index) of personList.slice((currentPage-1)*pagesize,currentPage*pagesize)" :key="index">
        <div class="front">
            <img :src='item.pic' class='contact' />
            <li class='name'>{{item.name}}</li>
            <hr>
            <li class='word'> - {{item.groupname  | ellipsis}} - </li>
            <el-button type="text" @click="getOne(item.number) ">详情</el-button>
            <el-dialog
              :visible.sync="centerDialogVisible"
              :append-to-body = "true"
              width="35%"
              :modal="person"
              center>
              <el-descriptions title="个人信息">
                <el-descriptions-item label="姓名">{{person.name}}</el-descriptions-item>
                <el-descriptions-item label="班内序号">{{person.number}}</el-descriptions-item>
                <el-descriptions-item label="迭代三项目组">{{person.groupname}}</el-descriptions-item>
                <el-descriptions-item label="擅长课程">{{person.kc}}</el-descriptions-item>
              </el-descriptions>
              <h3>个人简介</h3>
              <p>{{person.grjj}}</p>
              <h3>学习技能</h3>
              <p>{{person.xxjn}}</p>

              <h3>校园经历——生活篇</h3>
              <p>{{person.xyjlsh}}</p>

              <h3>校园经历——学习篇</h3>
              <p>{{person.xyjlxx}}</p>
            </el-dialog>
        </div>
      </div>
    </el-main>
      <div class="story-page">
          <el-pagination  background layout="prev, pager, next"
                            @current-change="handleCurrentChange"
                            :page-sizes="[8]"
                            :page-size="pagesize"
                            :current-page="currentPage"
                            :total="this.personList.length">
      </el-pagination>
      </div>

      <nav class="k_menu_1">
        <input type="checkbox"  class="k_menu-open_1" name="k_menu-open_1" id="k_menu-open_1"/>
          <label class="k_menu-open-button" for="k_menu-open_1">
          <span><i class="k_menu_material-icons md-48">add</i></span>
        </label>
        <button  class="k_menu-item" id="k_menu-one">大一</button>
        <button  class="k_menu-item" id="k_menu-two">大二</button>
        <button  class="k_menu-item" id="k_menu-three">大三</button>
        <button  class="k_menu-item" id="k_menu-four">大四</button>
      </nav>
  </div>
</template>

<script>
import { getAllPerson, getOnePerson } from '@/utils/api/mine/safecenter.js'
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {
      centerDialogVisible: false,
      currentPage: 1, // 初始页
      pagesize: 8, //    每页的数据
      personList: [],
      person: {}
    }
  },
  created () {
    this.getAll()
  },
  filters: {
    // 超出一定字数显示省略号的过滤器
    ellipsis (val) {
      if (!val) return ''
      if (val.length > 7) {
        return val.slice(0, 7) + '......'
      }
      return val
    },
  },
  methods: {
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
    },
    getAll () {
      getAllPerson().then(res => {
        console.log(res);
        this.personList = res.data.data;
      })
    },
    getOne (num) {
      this.centerDialogVisible = true
      getOnePerson(num).then(res => {
        this.person = res.data.data
      })
    }

  }
}
</script>

<style lang="less" scoped>
  .story-container{
    background: url('https://liyun-oss1.oss-cn-beijing.aliyuncs.com/superb-class/image/assets/image/bg.png?versionId=CAEQGBiBgICX1PyZ5hciIDI4M2ZjZTM5MzQ5ZjRmNmRhYmYyOTY3MDM1ZWNhMDg3') no-repeat;
    background-size: cover;
    margin-top: 80px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    .person-wrapper{
      width: 70%;
      margin: 0 auto;
    }
    .flip-container {
      box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
      perspective: 1000;
      float: left;
      margin: 0 20px 20px 0;
          .front{
            backface-visibility: hidden;
            -webkit-backface-visibility:hidden;/* Chrome 和 Safari */
            -moz-backface-visibility:hidden; /* Firefox */
            -ms-backface-visibility:hidden; /* Internet Explorer */
            position: absolute;
          }
          .front {
            background: linear-gradient(to bottom right, #ffefba, #fff);
            opacity: 0.8;
            /deep/.el-button{
              color: orange;
              position: absolute;
              right: 10px;
              top: 10px;
            }
            img{
              height: 100px;
              width: 100px;
              border-radius: 50%;
              border: 5px solid white;
              margin-top: 20px;
              margin-left: 60px;
            }
            li{
              text-align: center;
              list-style: none;
            }
            hr{
                width: 150px;
            }
            .name{
                font-size: 1.2rem;
                margin-top: 15px;
            }
            .word{
                padding: 20px 30px;
                line-height: 25px;
            }
          }
      }
      .flip-container, .front{
          width: 230px;
          height: 280px;
          border-radius: 10px;
      }
    }
    .story-page{
        text-align: center;
        margin-bottom: 10px;
        /deep/.el-pagination.is-background .el-pager li:not(.disabled).active{
            background-color: orange;
        }
        /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover{
          color: black;
        }
    }
    .el-dialog{
      p{
        text-indent: 2rem;
        text-align: justify;
        line-height: 18px;
      }
      h3{
        color:black;
      }
    }
    /deep/.el-dialog__header{
      padding: 0;
    }
    /deep/.el-dialog__body{
      background-color: rgb(250, 240, 223);
  }
  /deep/.el-descriptions-item{
      background-color: rgb(250, 240, 223);
  }
  .k_menu-item, .k_menu-open-button {
  border: none;
  background: orange;/*Color*/
  border-radius: 100%;
  width: 70px;
  height: 70px;
  margin-left: -40px;
  position: absolute;
  top: 100px;
  color: white;
  text-align: center;
  line-height: 70px;
  box-shadow: inset 0 0 0 5px rgb(253,193,45);/*Color*/
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform ease-out 200ms;
  transition: -webkit-transform ease-out 200ms;
  transition: transform ease-out 200ms;
  transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}

.k_menu-open_1{
  display: none;
}

.k_menu-item:hover {
  box-shadow: inset 0 0 0 5px #fdd567;
  cursor: pointer;
}

.k_menu-open-button{
  z-index: 2;
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
          transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition-duration: 400ms;
          transition-duration: 400ms;
  -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
          transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  cursor: pointer;
}

.k_menu-open-button:hover {
  -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
          transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

.k_menu_material-icons.md-30 {
  font-size: 30px;
  color: #FFFFFF;
  -webkit-transform: translate3d(0, 8px, 0);
  transform: translate3d(0, 8px, 0);
}
.k_menu_material-icons.md-48 {
  font-size: 48px;
  color: #FFFFFF;
  -webkit-transform: translate3d(0, 10px, 0);
  transform: translate3d(0, 10px, 0);
}
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.k_menu_material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
/*END Common styles*/
.k_menu_1 {
  position: absolute;
  top: 0;
  right: 0;
  padding-top: 20px;
  padding-left: 230px;
  width: 380px;
  height: 250px;
  box-sizing: border-box;
  font-size: 20px;
  text-align: left;
}
#k_menu-open_1:checked ~ #k_menu-one {
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
  -webkit-transform: translate3d(-80px, -70px, 0);
          transform: translate3d(-80px, -70px, 0);
}
#k_menu-open_1:checked ~ #k_menu-two {
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
  -webkit-transform: translate3d(80px, -70px, 0);
          transform: translate3d(80px, -70px, 0);
}
#k_menu-open_1:checked ~ #k_menu-three {
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
  -webkit-transform: translate3d(-80px, 70px, 0);
          transform: translate3d(-80px, 70px, 0);
}
#k_menu-open_1:checked ~ #k_menu-four {
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
  -webkit-transform: translate3d(80px, 70px, 0);
          transform: translate3d(80px, 70px, 0);
}
</style>
